<template>
  <div class="section user-section">
    <div class="head">
      <van-nav-bar class="nav-bar">
        <template #left>
          <van-icon name="arrow-left" @click="router.go(-1)" />
        </template>

        <template #title>
          <div class="title">修改密码</div>
        </template>
      </van-nav-bar>
    </div>

    <div class="body">
      <yu-card class="user-info-card">
        <template #body>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                class="user-info-list"
                v-model="formState.oldPassword"
                name="oldPassword"
                label="原始密码"
                placeholder="请填写原始密码"
                type="password"
                :rules="rules.oldPassword"
              />
              <van-field
                class="user-info-list"
                v-model="formState.newPassword1"
                name="newPassword1"
                label="新密码"
                type="password"
                placeholder="请填写新密码"
                :rules="rules.newPassword1"
              />
              <van-field
                class="user-info-list"
                v-model="formState.newPassword2"
                name="newPassword2"
                label="再次填写"
                type="password"
                placeholder="再次填写新密码"
                :rules="rules.newPassword2"
              />
            </van-cell-group>
            <div style="margin: 8px">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </template>
      </yu-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import toasts from "/@/views/components/toasts";
import { useStore } from "vuex";
import { changePassword } from "/@/api/auth";
import YuCard from "/@/components/YuCard";
import list from "/@/views/components/list/index.vue";
import bg1 from "/@/assets/imgs/bg-img1.png";
import bg2 from "/@/assets/imgs/bg-img2.png";
const router = useRouter();
const route = useRoute();
const store = useStore();

const trigger = "onBlur"; // onChange
var token = store.state.storage.user.token; //用于区分用户
var user = store.state.storage.user;

const formState = reactive({
  oldPassword: "",
  newPassword1: "",
  newPassword2: "",
});
onMounted(() => {});

const checkOld = (value, rule) => {
  if (!value) return "请填写原始密码";
  return true;
};

const checkNew1 = (value, rule) => {
  if (!value) return "请填写新密码";
  if (value === formState.oldPassword) return "请输入新的密码";
  return true;
};

const checkNew2 = (value, rule) => {
  if (!value) return "请填写新密码";
  if (value != formState.newPassword1) return "请确认两次输入相同的密码";
  return true;
};

const rules = {
  oldPassword: [{ validator: checkOld, trigger }],
  newPassword1: [{ validator: checkNew1, trigger }],
  newPassword2: [{ validator: checkNew2, trigger }],
};

// 按钮提交事件
const onSubmit = async (values) => {
  console.log("提交事件", values);
  var oldPassword = values.oldPassword;
  var newPassword = values.newPassword1;
  changePassword(
    {
      token,
      oldPassword,
      newPassword,
    },
    (res) => {
      if (res.code === 0) {
        toasts.success("修改成功");
        router.go(-1);
      } else {
        toasts.fail("修改失败");
      }
    }
  );
};
</script>

<style lang="scss" scoped>
.user-section {
  background: var(--yu-gray-color--light);
  min-height: 100vh;

  .head {
    height: 50px;
    position: relative;
    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--yu-linear-bg-color);
      border: none;
      .van-icon {
        color: var(--yu-white-color);
      }
      .title {
        color: var(--yu-white-color);
      }
      &:after {
        border: none;
      }
    }
    .head-bg {
      height: 150px;
      background: var(--yu-linear-bg-color);
      position: relative;
      overflow: hidden;
      width: 100%;
      img {
        display: inline-block;
        position: absolute;
        width: 80px;
        height: auto;
        opacity: 0.2;
        &.img1 {
          top: 0;
          right: 0;
        }
        &.img2 {
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  .user-info {
    position: absolute;
    top: 66px;
    left: 13px;
    width: calc(100% - 26px);
    z-index: 9;

    .card-body-wrapper {
      .avatar {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 16px;
        box-shadow: var(--yu-border-shadow--light);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        color: rgba(36, 45, 61, 1);
        font-size: 12px;
        line-height: 18px;
        padding-top: 10px;
        text-align: left;
        width: calc(100% - 60px - 16px);
        .user-name {
          margin-bottom: 4px;
          font-weight: 600;
        }

      }
    }

  }

  .body {
    padding: 0 13px;
    margin-top: 10px;
  }
  .user-info-card {
    display: block;
    width: 100%;
    padding: 0;
    padding-bottom: 5px;
    
  }
  .user-info-list {
    font-size: 15px;
  }
}
</style>